<template>
  <RouterView />
</template>
<script setup>
import { toggleTheme } from '@/assets/js/toggleTheme'
import { watch, onMounted } from 'vue'
import { useDark } from '@vueuse/core'
onMounted(() => {
  changeBgColor()
})
const isDarkMode = () => {
  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
}
const changeBgColor = () => {
  const isDark = isDarkMode()
  const theme = window.localStorage.getItem('vueuse-color-scheme')
  if (isDark) {
    toggleTheme(theme === 'light' ? 'light' : 'dark')
  } else {
    toggleTheme(theme === 'dark' ? 'dark' : 'light')
  }
}
const isDark = useDark()
watch(isDark, () => {
  changeBgColor()
})
</script>

<style scoped lang="scss"></style>
